<template>
  <div class="app-container">
    <el-collapse
      v-model="activeNames"
      v-if="pcWorkbenchData[0] && pcWorkbenchData[0].children"
    >
      <el-collapse-item
        v-for="item in pcWorkbenchData[0].children"
        :title="item.name"
        :name="item.workbenchId"
        :key="item.workbenchId"
        class="container-item"
      >
        <el-row :gutter="12">
          <el-col
            v-for="cItem in item.children"
            :key="cItem.workbenchId"
            :span="3"
            @click.native="jumpHandle(cItem)"
            class="jump-card"
          >
            <div class="card-item">
              <!-- <i
                :class="
                  cItem.icon
                    ? cItem.icon + ' font-icon text-color-blue'
                    : 'font-icon text-color-blue'
                "
                style="margin-right: 5px"
              ></i> -->
              <img
                width="40px"
                height="40px"
                :src="
                  cItem.image === 'null'
                    ? '/images/LeaveYearApply.png'
                    : '/images/' + cItem.image
                "
                alt="暂无"
              />
              <span> {{ cItem.name }}</span>
            </div>
          </el-col>
          <el-col class="no-data" v-if="!item.children">暂无数据</el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <div class="no-data" v-else>
      <el-empty description="暂无事项"></el-empty>
    </div>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import request from "@/utils/request";

const PC_WORKBENCH_CODE = "pc";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: {
        url: "/workflow/actExtWorkbench/currWorkbenchList",
        method: "post",
      },
    };
  }

  onBeforeQuery(type, conditions, params) {
    if (type === "form") {
      params.code = PC_WORKBENCH_CODE;
    }
  }

  onBinded(data, context) {
    const workbenchData = (context.parameters || {}).workbenchData || [];
    workbenchData.forEach((item) => {
      this.vm.activeNames.push(item.workbenchId);
    });
    this.vm.pcWorkbenchData = this.vm.handleTree(workbenchData, "workbenchId");
  }

  mixin() {
    return {
      data() {
        return {
          activeNames: [],
          pcWorkbenchData: [],
        };
      },
      methods: {
        jumpHandle(item) {
          request({
            url: "/workflow/actExtWorkbench/jumpCheck",
            method: "post",
            params: {
              code: item.code,
            },
          })
            .then((r) => {
              if (r && r.success) {
                const {
                  url,
                  openType,
                  width = "1024px",
                  height = "630px",
                } = item;
                if (openType === "弹窗") {
                  this.$root.openModal(url, () => {}, {}, width, height);
                } else if (openType === "本窗口") {
                  this.$router.push(url);
                } else if (openType === "新窗口") {
                  window.open(url);
                } else {
                  this.msgError("未知的打开方式openType：" + openType);
                }
              } else {
                this.msgError(r.message);
              }
            })
            .catch((e) => {
              this.msgError("跳转失败，请稍后再试");
            });
        },
      },
    };
  }
}
</script>

<style scoped lang="less">
.jump-card {
  margin: 5px 0px;
}
// 每一个模块
.container-item {
  padding: 0px 21px 0;
  margin-bottom: 20px;
  background: #ffffff;
}
// 头部
.el-collapse-item /deep/ .el-collapse-item__header {
  position: relative;
  font-size: 16px;
  font-weight: 600;
}
.el-collapse-item {
  position: relative;
}
.el-collapse-item::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 17px;
  width: 0;
  height: 15px;
  border: 2px solid #2d87ff;
  border-radius: 20px;
}
//身体
.el-card__body {
  padding: 0;
}
.card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
.card-item > span {
  padding-top: 10px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #61677a;
}
</style>
